<!DOCTYPE html>
<html>
<head>
    <title>购物车</title>
    <meta charset="utf-8" />
    <style type="text/css">
        h1 {
            text-align:center;
        }
        table {
            margin:0 auto;
            width:60%;
            border:2px solid #aaa;
            border-collapse:collapse;
        }
        table th, table td {
            border:2px solid #aaa;
            padding:5px;
        }
        th {
            background-color:#eee;
        }
    </style>

    <script type="text/javascript">
        function add_shoppingcart(btn){
            var tr = btn.parentNode.parentNode;
            var goodsName = tr.children[0].innerText;
            var price = tr.children[1].innerText;

            var exists = false; //是否存在形同商品
            var goodsTd = document.getElementsByClassName('cartGoods');
            var index = -1;
            for(var i=0 ; i<goodsTd.length ; i++){
                if(goodsTd[i].innerText == goodsName){
                    exists = true;
                    index = i;
                    break;
                }
            }

            if(!exists){
                var tr = document.createElement("tr");
                var tb = document.getElementById('goods');
                tr.innerHTML = '<tr>                                                                            '+
                                '    <td class="cartGoods" >'+ goodsName     +'</td>                                                       '+
                                '    <td>'+price+'</td>                                                                 '+
                                '    <td align="center">                                                         '+
                                    '    <input type="button" value="-" onclick="decrease(this)"/>                   '+
                                    '    <input type="text" size="3" readonly value="1" class="num"/>                            '+
                                    '    <input type="button" value="+" onclick="increase(this)"/>                   '+
                                    '</td>                                                                          '+
                                    '<td>'+price+'</td>                                                                    '+
                                    '<td align="center"><input type="button" value="x" onclick="this.parentNode.parentNode.remove()"/></td>   '+
                                '</tr>      ';

                // console.log(tr.innerHTML);
                tb.appendChild(tr)
            }else{

                var inpPrice = document.getElementsByClassName('num')[index];


                inpPrice.value = parseInt(inpPrice.value) +1;

                sumLine(inpPrice) ; //计算单行的合计
            }


            sum();
        }

        //btnInCre 加号按钮
        function increase(btnInCre){

            var inpNum = btnInCre.parentNode.children[1];
            inpNum.value = parseInt(inpNum.value )+ 1;

            sumLine(inpNum);

        }

        //btnDeCre 减号按钮
        function decrease(btnDeCre){

            var inpNum = btnDeCre.parentNode.children[1];
            if(inpNum.value <=1){
                //如果数量为1 则删除行
                btnDeCre.parentNode.parentNode.remove();
            }else{        
                inpNum.value = parseInt(inpNum.value )- 1;
            }
            sumLine(inpNum);

        }




        //inpNum
        function sumLine(inpNum){
            var tr = inpNum.parentNode.parentNode;
            var num = parseFloat(inpNum.value);
            var price = parseFloat(tr.children[1].innerText);
            var oneSum  = num * price; //行的合计

            console.log(oneSum);
            tr.children[3].innerText = oneSum;

            sum();
        }



        function sum(){
            var inpNum = document.getElementsByClassName('num')

            var summ = 0;
            if(inpNum && inpNum.length>0){
                for(var i =0; i<inpNum.length ; i++){
                    summ +=  parseInt(inpNum[i].value) *  parseFloat(inpNum[i].parentNode.parentNode.children[1].innerText);
                }
            }

            // console.log("summ: "+summ);

            document.getElementById('total').innerText = summ;
        }


    </script>
</head>
<body>
<h1>真划算</h1>
<table>
    <tr>
        <th>商品</th>
        <th>单价(元)</th>
        <th>颜色</th>
        <th>库存</th>
        <th>好评率</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>罗技M185鼠标</td>
        <td>80</td>
        <td>黑色</td>
        <td>893</td>
        <td>98%</td>
        <td align="center">
            <input type="button" value="加入购物车" onclick="add_shoppingcart(this)"/>
        </td>
    </tr>
    <tr>
        <td>微软X470键盘</td>
        <td>150</td>
        <td>黑色</td>
        <td>9028</td>
        <td>96%</td>
        <td align="center">
            <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
    </tr>
    <tr>
        <td>洛克iphone6手机壳</td>
        <td>60</td>
        <td>透明</td>
        <td>672</td>
        <td>99%</td>
        <td align="center">
            <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
    </tr>
    <tr>
        <td>蓝牙耳机</td>
        <td>100</td>
        <td>蓝色</td>
        <td>8937</td>
        <td>95%</td>
        <td align="center">
            <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
    </tr>
    <tr>
        <td>金士顿U盘</td>
        <td>70</td>
        <td>红色</td>
        <td>482</td>
        <td>100%</td>
        <td align="center">
            <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
    </tr>
</table>



<h1>购物车</h1>
<table>
    <thead>
    <tr>
        <th>商品</th>
        <th>单价(元)</th>
        <th>数量</th>
        <th>金额(元)</th>
        <th>删除</th>
    </tr>
    </thead>
    <tbody id="goods">

 </tbody>
    <tfoot>
    <tr>
        <td colspan="3" align="right">总计</td>
        <td id="total"></td>
        <td></td>
    </tr>
    </tfoot>
</table>
</body>
</html>